<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button link @click="searchHandler('0')" :class="readStatus==='0'?'itemActive':'itemUnActive'">未读消息({{unReadCount}})</el-button>
				<el-button link @click="searchHandler('1')" :class="readStatus==='1'?'itemActive':'itemUnActive'">已读消息({{readCount}})</el-button>
			</div>
			<div class="left-panel">
				<fsButton ref="button" plain size="small" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-container>
				<el-main class="nopadding">
					<ex-table id="messageTable" ref="table" :columns="columns" :url="this.$API.system.message.myPageData.url" :auto-refresh="false" :refs="this.$refs" search="search" @columnClick="columnClickHandler"></ex-table>
				</el-main>
			</el-container>
		</el-main>
	</el-container>
	<save-dialog ref="saveDialog" @success="searchHandler"/>
	<view-dialog ref="viewDialog"/>

</template>

<script>
import saveDialog from './save'
import viewDialog from './view'
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";
import store from "@/store";
import useTabs from "@/utils/useTabs";

export default {
	name: '消息中心',
	components: {
		viewDialog,
		ExSearchTree,
		ExSearch,
		ExTable,
		saveDialog,
	},
	data() {
		return {
			readCount:0,
			unReadCount:0,
			readStatus:'0',
			messageCount:this.$store.state.websocket,
			buttons: [
				{type:'primary',name: this.$t('button.mark_read'), icon: "el-icon-circle-check", click: "markRead", permission: ""},
				{type:'info', name: this.$t('button.mark_unread'), icon: "el-icon-circle-close", click: "markUnRead", permission: ""},
				{type:'danger', name: this.$t('button.delete'), icon: "el-icon-delete", click: "del", permission: ""},
			],
			columns: [
				{code: "title", name: "标题", width: "300", click: "show1"},
				{code: "content", name: "内容", width: ""},
				{code: "createTime", name: "时间", width: "175", sortable: true, formatter: "DATETIME"},

			],
			parentLevelCode: null,
		}
	},
	watch:{
		messageCount:{
			handler(){
				this.searchHandler();
			},
			deep:true
		},
		readStatus:{
			handler(){
				if(this.readStatus==='0'){
					this.buttons =[
						{type:'primary',name: this.$t('button.mark_read'), icon: "el-icon-circle-check", click: "markRead", permission: ""},
					];
				}else{
					this.buttons =[
						{type:'info', name: this.$t('button.mark_unread'), icon: "el-icon-circle-close", click: "markUnRead", permission: ""},
						{type:'danger', name: this.$t('button.delete'), icon: "el-icon-delete", click: "del", permission: ""},
					];
				}
			},
			immediate:true,
		}
	},
	created() {
	},
	mounted() {
		this.searchHandler(this.readStatus);
	},
	methods: {
		buttonHandler(index, name) {
			this.$options.methods[name](this, index);
		},
		async searchTreeHandler(data) {
			this.parentLevelCode = data.levelCode;
			let queryParams = {pathCode: this.parentLevelCode}
			await this.$refs.table.refresh(queryParams);
		},
		async searchHandler(readStatus) {
			if(readStatus===undefined){
				readStatus = this.readStatus;
			}
			this.readStatus = readStatus;
			if(this.readStatus==='0'){
				useTabs.setTitle("未读消息");
			}else{
				useTabs.setTitle("已读消息");
			}
			let queryParams = {pathCode: this.parentLevelCode, readStatus: readStatus}
			this.$refs.table.refresh(queryParams);
			let res = await this.$API.system.message.myMessageCount.post({});
			if(res.code===2000){
				this.unReadCount = res.map.unReadCount||0;
				this.readCount = res.map.readCount||0;

			}

		},
		columnClickHandler(name, data) {
			this.$options.methods[name](this, data);
		},
		//查看
		show(_this) {
			let row = _this.$refs.table.selectionOne();
			if (!row) {
				return;
			}

			_this.$nextTick(() => {
				_this.$refs.viewDialog.open(row);
			})
		},
		//查看
		async show1(_this, row) {
			_this.mark(row.id);
			if (row.msgType.includes("document")) {
				let rsp = await _this.$API.asset.document.findById.post({id: row.relObjectId});
				if (rsp.code === 2000) {
					let document = rsp.data;
					_this.$router.push({
						name: "documentPrepare",
						params: {
							fromRouteId: _this.$TOOL.crypto.MD5(_this.$route.path),
							configId: document.documentConfigId,
							id: document.id
						}
					});
				}
			} else if (row.msgType.includes("asset_check")) {

			} else {
				_this.$nextTick(() => {
					_this.$refs.viewDialog.open(row);
				})
			}
		},
		//标记已读
		async mark(msgId) {
			let msgIds = [];
			msgIds.push(msgId);
			if (msgIds.length > 0) {
				let rsp = await this.$API.system.message.markMessage.post({ids: msgIds,markType:'read'});
				if(rsp.code===2000){
					this.$store.dispatch("messageChange");
					this.searchHandler();
				}
			}
		},
		//批量删除
		del(_this, index) {
			let selections = _this.$refs.table.selections();
			if (selections.length === 0) {
				_this.$message.warning(_this.$t("common.please_select_data"));
				return;
			}
			_this.$confirm(`确定删除选中的 ${selections.length} 项吗？如果删除项中含有子集将会被一并删除`, _this.$t('common.warn'), {
				type: 'warning'
			}).then(async () => {
				_this.$refs.button.loading(index, true);
				var delarray = [];
				for (let index = 0; index < selections.length; index++) {
					const element = selections[index];
					delarray.push(element.id);
				}
				var res = await _this.$API.system.message.removeByIds.post(delarray);
				if (res.code === 2000) {
					_this.$message.success(_this.$t("code."+res.code));
					_this.searchHandler();
					_this.$store.dispatch("messageChange");
				}
				_this.$refs.button.loading(index, false);
			}).catch(() => {
				_this.$refs.button.loading(index, false);
			});
		},
		//批量启用
		markRead(_this, index) {
			let selections = _this.$refs.table.selections();
			if (selections.length === 0) {
				_this.$message.warning(_this.$t("common.please_select_data"));
				return;
			}
			_this.$confirm(`确定把选中的 ${selections.length} 项变为已读状态吗？`, _this.$t('common.warn'), {
				type: 'warning'
			}).then(async () => {
				_this.$refs.button.loading(index, true);
				var delarray = [];
				for (let index = 0; index < selections.length; index++) {
					const element = selections[index];
					delarray.push(element.id);
				}
				var res = await _this.$API.system.message.markMessage.post({ids:delarray,markType:'read'});
				if (res.code === 2000) {
					_this.$message.success(_this.$t("code."+res.code));
					_this.searchHandler();
					_this.$store.dispatch("messageChange");
				}
				_this.$refs.button.loading(index, false);
			}).catch(() => {
				_this.$refs.button.loading(index, false);
			});
		},
		//批量禁用
		markUnRead(_this, index) {
			let selections = _this.$refs.table.selections();
			if (selections.length === 0) {
				_this.$message.warning(_this.$t("common.please_select_data"));
				return;
			}
			_this.$confirm(`确定把选中的 ${selections.length} 项变为未读状态吗？`, _this.$t('common.warn'), {
				type: 'warning'
			}).then(async () => {
				_this.$refs.button.loading(index, true);
				var delarray = [];
				for (let index = 0; index < selections.length; index++) {
					const element = selections[index];
					delarray.push(element.id);
				}
				var res = await _this.$API.system.message.markMessage.post({ids:delarray,markType:'unread'});
				if (res.code === 2000) {
					_this.$message.success(_this.$t("code."+res.code));
					_this.searchHandler();
					_this.$store.dispatch("messageChange");
				}
				_this.$refs.button.loading(index, false);
			}).catch(() => {
				_this.$refs.button.loading(index, false);
			});
		},
	}
}
</script>
<style scoped>

</style>
